<template>
    <view class="flex-start-center documents-box" v-for="item in PropsData.data" :key="item.c_id" @click="onClickDocuments(item)">
        <view class="left">
            <span class="point" v-show="item.c_status == 'NV'"></span>
            <image :src="'../../../static/img/knowledge/' +item.docType" mode="scaleToFill" class="image" />
        </view>
        <view class="right flex-column-between">
            <view class="flex-start-center">
                <view class="text-ellipsis sub_title flex_1">{{ item.c_title }}</view>
                <view class="text-ellipsis tertiary_des">{{ item.c_dt }}</view>
            </view>
            <view class="text-ellipsis sub_des">{{item.c_doc_no}}</view>
        </view>
    </view>
    <view v-if="PropsData.data.length == 0" class="no-data">
        <image src="@/static/img/no_data.png" mode="aspectFit" class="image" />
    </view>
</template>
  
<script setup lang="ts">
import { defineProps } from 'vue';

/**
 *  公文
 */

 const PropsData = defineProps<{ data: Array<{
    c_bill_name?: string;
    c_dt?: string;
    c_extend_key?: string;
    c_item_type?: string;
    c_id: number | string,
    c_title: string;
    c_status: string;
    [key: string]: any; 
}> }>();
const onClickDocuments = (item) => {
	uni.navigateTo({
        url: '/pages/OaViews/Document/DocDetail?id=' + item.c_link_key+ '&c_id=' + item.c_id
    });
}

</script>
  
<style lang="scss" scoped>

.documents-box {
    margin-top: 28px;
    margin-bottom: 40rpx;

}

.left {
    position: relative;
    width: 88rpx;
    height: 88rpx;
    border-radius: 32rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    .point {
        position: absolute;
        top: 2px;
        right: 1px;
    }   
    .image {
        width: 100%;
        height: 100%;
    }
}
.right {
    flex: 1;
    width: 0;
    height: 72rpx;
    margin-left: 20rpx;
}

</style>